namespace("controls.ModalScreen", {
	'@inherits' : w3c.HtmlComponent,
	
	initialize : function(){
		var self=this;
		this.setStyles({"z-index":application.absoluteZindex()});
		
		this.addEventListener("click", function(e){
			if(e.target == self.element) {
				application.demodalize();
			}
		}, false);
		
		this.addEventDelegate(".button-close:click",function(e){
			application.demodalize();
		}, false);
		
		this.setStyles({
			width : xClientWidth() + "px", 
			height: xClientHeight()+ "px"
		});
	
		
	},
	
	setModalDialog : function(aControl, x, y){
		this.modaldialog=aControl;
		this.setStyles({left:x+"px", top:y+"px"}, aControl);
	},
	
	clear : function(){
		if (this.modaldialog) {
			this.modaldialog.parentNode.removeChild(this.modaldialog);
			this.modaldialog=null;
		}
		this.element.innerHTML = "";
	},
	
	show : function() {
		this.setStyles({"z-index":application.absoluteZindex()});
		this.appendChild(this.modaldialog);
		this.setStyles({display:"block"});
	},
	
	hide : function(){
		this.setStyles({display:"none"})
	},
	
	innerHTML: '<div></div>',
	
	close : function(){
		this.element.parentNode.removeChild(this.element)
	},
	
	centerize : function(control, parent){
		var self=this;
		var width = xGetComputedStyle(control,"width",1);//parseInt(this.getStyle("width",control));
		var height = xGetComputedStyle(control, "height", 1)
		var top  = (xClientHeight()/2) - (height/2);
		var left = (xClientWidth()/2)  - (width/2);
		this.setStyles({left:left+"px", top:top +"px"}, control);	
	},
	
	
	cssText:
	'.ModalScreen {display:none; position:fixed; top:0px; left:0px; }'
});